/**
 * title: Token 查看器
 * desc: 查看 Button 组件使用的所有 Token。打开浏览器控制台查看完整的 Token 列表。
 */

import React, { useEffect } from 'react';
import { theme, Button, Space } from 'antd';
import { printAllTokens, searchTokens, getTokensByCategory } from '../../../utils/printAllTokens';

const { useToken } = theme;

export default () => {
  const { token } = useToken();

  useEffect(() => {
    // 打印所有 Token
    console.log('=== 打印所有 Token ===');
    printAllTokens(token);

    // 搜索特定 Token
    console.log('=== 搜索 "padding" 相关的 Token ===');
    console.table(searchTokens(token, 'padding'));

    // 按类别获取 Token
    console.log('=== 按类别分组的 Token ===');
    const categories = getTokensByCategory(token);
    console.log('颜色相关:', categories.color);
    console.log('字体相关:', categories.font);
    console.log('尺寸相关:', categories.size);
  }, [token]);

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <div
        style={{
          padding: token.padding,
          background: token.colorBgContainer,
          border: `1px solid ${token.colorBorder}`,
          borderRadius: token.borderRadius,
        }}
      >
        <h3 style={{ color: token.colorTextHeading }}>Button 组件使用的主要 Token</h3>
        
        <div style={{ marginTop: token.margin }}>
          <h4>尺寸相关：</h4>
          <ul>
            <li>fontSize: {token.fontSize}px</li>
            <li>fontSizeLG: {token.fontSizeLG}px</li>
            <li>fontSizeSM: {token.fontSizeSM}px</li>
            <li>controlHeight: {token.controlHeight}px</li>
            <li>controlHeightLG: {token.controlHeightLG}px</li>
            <li>controlHeightSM: {token.controlHeightSM}px</li>
          </ul>
        </div>

        <div style={{ marginTop: token.margin }}>
          <h4>颜色相关：</h4>
          <ul>
            <li>
              colorPrimary: 
              <span style={{ 
                marginLeft: 8, 
                padding: '2px 8px', 
                background: token.colorPrimary,
                color: '#fff',
                borderRadius: 4 
              }}>
                {token.colorPrimary}
              </span>
            </li>
            <li>
              colorText: 
              <span style={{ 
                marginLeft: 8, 
                padding: '2px 8px', 
                background: token.colorBgContainer,
                color: token.colorText,
                border: `1px solid ${token.colorBorder}`,
                borderRadius: 4 
              }}>
                {token.colorText}
              </span>
            </li>
            <li>
              colorBgContainer: 
              <span style={{ 
                marginLeft: 8, 
                padding: '2px 8px', 
                background: token.colorBgContainer,
                border: `1px solid ${token.colorBorder}`,
                borderRadius: 4 
              }}>
                {token.colorBgContainer}
              </span>
            </li>
          </ul>
        </div>

        <div style={{ marginTop: token.margin }}>
          <h4>间距相关：</h4>
          <ul>
            <li>paddingContentHorizontal: {token.paddingContentHorizontal}px</li>
            <li>paddingContentHorizontalLG: {token.paddingContentHorizontalLG}px</li>
            <li>paddingContentHorizontalSM: {token.paddingContentHorizontalSM}px</li>
            <li>marginXS: {token.marginXS}px</li>
          </ul>
        </div>

        <div style={{ marginTop: token.margin }}>
          <h4>动画相关：</h4>
          <ul>
            <li>motionDurationMid: {token.motionDurationMid}</li>
            <li>motionEaseInOut: {token.motionEaseInOut}</li>
          </ul>
        </div>
      </div>

      <div style={{ 
        padding: token.padding, 
        background: token.colorInfoBg,
        borderRadius: token.borderRadius 
      }}>
        💡 打开浏览器控制台（F12）查看完整的 Token 列表和分类
      </div>

      <Space>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </Space>
    </Space>
  );
};

